<template>
  <el-menu
    :default-active="activeMenu"
    class="aside-menu"
    :collapse="isCollapse"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
    router
  >
    <el-menu-item index="/">
      <el-icon><HomeFilled /></el-icon>
      <template #title>首页</template>
    </el-menu-item>

    <el-menu-item index="/userManger">
      <el-icon><UserFilled /></el-icon>
      <template #title>用户管理</template>
    </el-menu-item>

    <el-menu-item index="/productManger">
      <el-icon><Goods /></el-icon>
      <template #title>商品管理</template>
    </el-menu-item>

    <el-menu-item index="/ordersManger">
      <el-icon><List /></el-icon>
      <template #title>订单管理</template>
    </el-menu-item>

    <el-menu-item index="/bannersManger">
      <el-icon><Picture /></el-icon>
      <template #title>轮播图管理</template>
    </el-menu-item>

    <el-menu-item index="/categoryManger">
      <el-icon><Menu /></el-icon>
      <template #title>商品分类管理</template>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  HomeFilled,
  UserFilled,
  Goods,
  List,
  Picture,
  Menu
} from '@element-plus/icons-vue'

export default {
  name: 'AdminAside',
  components: {
    HomeFilled,
    UserFilled,
    Goods,
    List,
    Picture,
    Menu
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  setup () {
    const route = useRoute()
    const activeMenu = computed(() => route.path)

    return {
      activeMenu
    }
  }
}
</script>

<style scoped>
.aside-menu {
  height: 100vh;
  border-right: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 60px;
}

.aside-menu:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu-item {
  display: flex;
  align-items: center;
  height: 50px;
  line-height: 50px;
}

.el-menu-item.is-active {
  background-color: #263445 !important;
}

.el-icon {
  margin-right: 5px;
  width: 24px;
  height: 24px;
}
</style>
